<script setup>
import {onMounted, reactive, ref} from "vue";
import temblorLeader from "@/api/temblor/temblorLeader.js";
import temblorCarApply from "@/api/temblor/temblorCarApply.js";
import {Message} from "@arco-design/web-vue";

onMounted(() => {
  getList()
})
const visible = ref(false)
const visibleInfo = ref(false)
const title = ref('')
const form = reactive({
  // 申请人id
  apply_user_id: 0,
  // 用车起止时间
  sn_time: '',
  // 用车人数
  number: 1,
  // 车辆类型
  type: '轿车',
  // 用车地点
  place: '',
  // 用车事由
  reason: '',
  // 领导
  leader: '',
  // 综合室主任
  general_manager: '',


})
const leaderData = ref([])
// 补全信息表单
const wrtieInfoForm = reactive({
  id: 0,
  // “司机姓名”，“联系电话”，“车牌号”，“往返里程”，“过路费”，“加油费”
  name: '',
  phone: '',
  car_number: '',
  round_trip_mileage: '',
  toll: 0,
  oil: 0
})
const save = (val) => {
  getLeaderList()
  if (val) {
    title.value = '修改申请'
  } else {
    title.value = '新增申请'
  }
  visible.value = true
}
const getLeaderList = async () => {
  const res = await temblorLeader.leaderList()
  leaderData.value = res.data
}
const paginate = reactive({
  page: 1,
  limit: 10,
  total: 0,
  list: []
})
const submit = async () => {
  form.apply_user_id = form.apply_user_id[0].id
  const res = await temblorCarApply.submit(form)
  if (res.code === 200) {
    Message.success('提交成功，等待审核')
    visible.value = false
  } else {
    Message.error('提交失败')
    visible.value = false
  }
}
const close = () => {
  form.apply_user_id = 0
  form.sn_time = ''
  form.number = 1
  form.type = '轿车'
  form.place = ''
  form.reason = ''
  form.leader = ''
}
const columns = [
  {
    title: '申请人',
    dataIndex: 'apply_user.username',
  },
  {
    title: '用车时间',
    dataIndex: 'sn_time',
  },
  {
    title: '用车类型',
    dataIndex: 'car_type',
  },
  {
    title: '用车人数',
    dataIndex: 'number',
  },
  {
    title: '车辆类型',
    dataIndex: 'type',
  },
  {
    title: '用车地点',
    dataIndex: 'place',
  },
  {
    title: '用车事由',
    dataIndex: 'reason',
  },
  {
    title: '审批领导',
    dataIndex: 'leader.username'
  },
  {
    title: '综合部主任',
    dataIndex: 'general_manager.username'
  },
  {
    title: '操作',
    slotName: 'action'
  }
]
/**
 *
 * @returns {Promise<void>}
 */
const getList = async () => {
  const res = await temblorCarApply.record({
    page: paginate.page,
    limit: paginate.limit
  })
  if (res.code === 200) {
    paginate.total = res.data.total
    paginate.page = res.data.page
    paginate.limit = res.data.limit
    paginate.list = res.data.list
  }
}
const changePage = (page) => {
  paginate.page = page
  getList()
}
const writeInfo = (id) => {
  wrtieInfoForm.id = id
  visibleInfo.value = true
}
const showInfo = (record) => {
  wrtieInfoForm.name = record.name
  wrtieInfoForm.phone = record.phone
  wrtieInfoForm.car_number = record.car_number
  wrtieInfoForm.round_trip_mileage = record.round_trip_mileage
  wrtieInfoForm.toll = record.toll
  wrtieInfoForm.oil = record.oil
  visibleInfo.value = true

}
const beforeClose = () => {
  wrtieInfoForm.name = ''
  wrtieInfoForm.phone = ''
  wrtieInfoForm.car_number = ''
  wrtieInfoForm.round_trip_mileage = ''
  wrtieInfoForm.toll = 0
  wrtieInfoForm.oil = 0
  visibleInfo.value = false
}
const submitInfo = async () => {
  const res = await temblorCarApply.submitInfo(wrtieInfoForm)
  if (res.code === 200) {
    Message.success('提交成功')
    await getList()
    visibleInfo.value = false
    await getList()
  } else {
    Message.error('提交失败')
  }
}
</script>

<template>
  <a-card>
    <!--    <a-button type="primary" @click="save">新增申请</a-button>-->
    <a-table class="mt-3" :columns="columns" :data="paginate.list">
      <template #action="{record}">
        <a-button type="primary" v-if="record.status === 2 && record.info_status === 0" @click="writeInfo(record.id)">
          用车完毕补全信息
        </a-button>
        <a-button type="primary" @click="showInfo(record)" status="success" v-else>
          查看用车信息
        </a-button>
      </template>
    </a-table>
    <a-pagination :total="paginate.total" :current="paginate.page" :page-size="paginate.limit" @change="changePage"
                  class="mt-3"/>
  </a-card>
  <!-- 新增用车申请弹出框  start-->
  <a-modal width="900px" v-model:visible="visible" @ok="submit" @before-close="close">
    <template #title>
      {{ title }}
    </template>
    <div>
      <a-form :model="form">
        <a-form-item label="申请人" name="apply_user_id">
          <ma-user :only-id="false" :multiple="false" v-model="form.apply_user_id"/>
          <a-tag v-if="form.apply_user_id.length>0">已选择用户：{{ form.apply_user_id[0].username }}</a-tag>
        </a-form-item>
        <a-form-item label="用车时间" name="sn_time">
          <a-range-picker v-model="form.sn_time"/>
        </a-form-item>
        <a-form-item label="用车人数" name="number">
          <a-select v-model="form.number">
            <a-option :value="1">1</a-option>
            <a-option :value="2">2</a-option>
            <a-option :value="3">3</a-option>
            <a-option :value="4">4</a-option>
            <a-option :value="5">5</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车辆类型" name="type">
          <a-select v-model="form.type">
            <a-option value="轿车">轿车</a-option>
            <a-option value="SUV">SUV</a-option>
            <a-option value="皮卡">皮卡</a-option>
            <a-option value="面包">面包</a-option>
            <a-option value="MPV">MPV</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="用车地点" name="place">
          <a-textarea v-model="form.place"/>

        </a-form-item>
        <a-form-item label="用车事由" name="reason">
          <a-textarea v-model="form.reason"/>
        </a-form-item>
        <a-form-item label="领导" name="leader">
          <a-select v-model="form.leader">
            <a-option v-for="(item,index) in leaderData" :value="item.id">
              {{ item.username }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="综合室主任" name="leader">
          <a-select v-model="form.general_manager">
            <a-option v-for="(item,index) in leaderData" :value="item.id">
              {{ item.username }}
            </a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
  <a-modal @cancel="beforeClose" @ok="submitInfo" :visible="visibleInfo" title="补全用车信息">
    <!-- 删除用车申请弹出框 end-->
    <div>
      <a-form :model="wrtieInfoForm">
        <a-form-item label="司机姓名">
          <a-input v-model="wrtieInfoForm.name"></a-input>
        </a-form-item>
        <a-form-item label="联系电话">
          <a-input v-model="wrtieInfoForm.phone"></a-input>
        </a-form-item>
        <a-form-item label="车牌号">
          <a-input v-model="wrtieInfoForm.car_number"></a-input>
        </a-form-item>
        <a-form-item label="往返里程">
          <a-input v-model="wrtieInfoForm.round_trip_mileage"></a-input>
        </a-form-item>
        <a-form-item label="过路费">
          <a-input v-model="wrtieInfoForm.toll"></a-input>
        </a-form-item>
        <a-form-item label="油费">
          <a-input v-model="wrtieInfoForm.oil"></a-input>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<style scoped>

</style>